<template>
  <div id="zpjc_bar" :style="{ width: '100%', height: '350px', backgroundColor: '#fff' }"></div>
</template>
<script>
import echarts from 'echarts'
let echartData = {}
export default {
  data() {
    return {}
  },
  props: ['chartsData'],
  watch: {
    chartsData: {
      // 正确给 cData 赋值的 方法
      deep: true,
      handler(newVal, oldVal) {
        echartData = newVal
      },
    },
  },
  mounted() {
    echartData = this.chartsData
    const daoXu = echartData.cityData
    const arr = [...daoXu]
    var myChart = echarts.init(document.getElementById('zpjc_bar'))
    const option = {
      tooltip: {
        formatter: '{b} ({c}次)',
      },
      grid: {
        borderWidth: 0,
        top: '15%',
        left: '5%',
        right: '15%',
        bottom: '3%',
      },
      xAxis: {
        type: 'value',
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
      },
      yAxis: [
        {
          type: 'category',
          inverse: true,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
            inside: false,
          },
          data: echartData.cityData,
        },
        {
          type: 'category',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            inside: false,
            verticalAlign: 'bottom',
            lineHeight: 20,
            textStyle: {
              color: '#333333',
              fontSize: '14',
            },
            formatter: function (val) {
              return `${val}`
            },
          },
          splitArea: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          data: arr.reverse(),
          // .reverse()
        },
      ],
      series: [
        {
          data: this.haha().value1,
          type: 'bar',
          zlevel: 1,
          barGap: '-100%',
          barWidth: '10px',
          legendHoverLink: false,
          barCategoryGap: 0,
        },
        {
          name: 'bar',
          type: 'bar',
          zlevel: 2,
          barWidth: '10px',
          data: this.haha().value2,
          label: {
            normal: {
              color: '#b3ccf8',
              show: true,
              position: [0, '-24px'],
              textStyle: {
                fontSize: 16,
              },
              formatter: function (a) {
                let num = ''
                let str = ''
                if (a.dataIndex + 1 < 10) {
                  num = a.dataIndex + 1 + '.'
                } else {
                  num = a.dataIndex + 1
                }
                if (a.dataIndex === 0) {
                  str = `{color1|${num}} {color4|${a.name}}`
                } else if (a.dataIndex === 1) {
                  str = `{color1|${num}} {color4|${a.name}}`
                } else {
                  str = `{color1|${num}} {color4|${a.name}}`
                }
                return str
              },
              rich: {
                color1: {
                  color: '#333333',
                  fontWeight: 700,
                },
                color4: {
                  color: '#333333',
                },
              },
            },
          },
        },
      ],
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      //   让我们图表调用resize方法
      myChart.resize()
    })
  },
  methods: {
    haha() {
      const top10CityData = echartData.cityData
      const color = ['#1989FA', '#1989FA', '#1989FA', '#1989FA', '#1989FA']
      const color1 = ['#1989FA', '#1989FA', '#1989FA', '#1989FA', '#1989FA']
      const lineY = []
      const lineT = []
      for (var i = 0; i < echartData.cityList.length; i++) {
        var x = i
        var datas = {
          name: echartData.cityList[i],
          color: color[x],
          value: top10CityData[i],
          barGap: '-100%',
          itemStyle: {
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: color[x],
                  },
                  {
                    offset: 1,
                    color: color1[x],
                  },
                ],
                false
              ),
              barBorderRadius: 10,
            },
            emphasis: {
              shadowBlur: 15,
              shadowColor: 'rgba(0, 0, 0, 0.1)',
            },
          },
        }
        var data1s = {
          value: top10CityData[0],
          itemStyle: {
            color: '#EFEFEF',
            barBorderRadius: 10,
          },
        }
        lineY.push(datas)
        lineT.push(data1s)
      }
      const obj = {
        value1: lineT,
        value2: lineY,
      }
      return obj
    },
  },
}
</script>
